<template>
	<view class="page group-admin">
		<nav-header title="设置管理员" :show-right="false">
			<!-- <template v-slot:right>
				<view class="confirm-text" :disabled="inviteSize == 0" @click="setAdmin">确认</view>
			</template> -->
		</nav-header>

		<view style="width: 100%;">
			<view class="search">
				<up-search placeholder="搜索群成员" v-model="searchText" :clearabled="true" :showAction="false"
					bg-color="#ffffff" borderColor="#E9EAEB" search-icon-color="#474a52" placeholder-color="#82868d"
					height="40"></up-search>
			</view>
		</view>

		<view class="admin" v-if="group.adminDetails">
			<view class="title text-sm-Regular">当前管理员：</view>
			<view class="box">
				<view v-for="item in group.adminDetails" class="admin-item">
					<view style="margin-left: 10rpx;">
						<head-image :name="item.showNickName" :url="item.headImage" :size="90"></head-image>
					</view>
					<text class="text-xs-Regular">{{item.showNickName}}</text>
				</view>
			</view>
		</view>

		<view class="member-items">
			<up-index-list :index-list="friendIdx">
				<template v-for="(friends, i) in friendGroups">
					<up-index-item>
						<up-index-anchor :text="friendIdx[i] == '*' ? '在线' : friendIdx[i]"
							bgColor="#f2f3fd"></up-index-anchor>
						<view v-for="friend in friends" v-show="!searchText || friend.nickName.includes(searchText)"
							:key="friend.id">
							<view class="member-item" @click="onSwitchChecked(friend)">
								<view class="friend-checked">
									<radio style="transform:scale(0.8)" :checked="friend.checked"
										:disabled="friend.disabled" @tap.stop.native="onSwitchChecked(friend)"
										color="#1989FA" />
									<!-- <radio :checked="selectedFriendId===friend.id" :disabled="friend.disabled"
										@click.stop="onSwitchChecked(friend)" color="#1989FA" /> -->
								</view>
								<head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage"
									:size="90"></head-image>

								<view class="member-name">{{ friend.nickName }}</view>
							</view>
						</view>
					</up-index-item>
				</template>
			</up-index-list>
		</view>

		<view class="tabbar">
			<view class="list">
				<view class="left">
					<text class="text-sm-Regular" style="color: #A4A7AE;">管理员：</text><text class="text-sm-Medium"><text
							style="color: #2970FF;">{{countAdmin}}</text>/5人</text>
				</view>
				<view class="right">
					<button class="btncolor" type="primary" size="mini" @tap.stop.native="setAdmin">
						<text class="text-md-Medium">完成设置</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pinyin
	} from 'pinyin-pro';
	export default {
		data() {
			return {
				isModify: false,
				searchText: "",
				group: {},
				groupMembers: [],
				friendItems: [],
				selectedFriendId: null,
				checkItems: [],
				groupId: null,
				groupAdmin: null,
			}
		},
		methods: {
			setAdmin() {
				this.checkItems = this.friendItems.filter(friend => friend.checked && !friend.disabled)
				const userIds = this.checkItems.map(member => member.id);
				let data = {
					groupId: this.groupId,
					ids: userIds
				}

				this.$http({
					url: "/group/createGroupAdmin",
					method: "POST",
					data: data
				}).then((group) => {
					uni.showToast({
						title: "操作成功",
						icon: 'none'
					})
					setTimeout(() => {
						// 回退并刷新
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.loadGroupInfo();
						uni.navigateBack();
					}, 1000);
				})

			},
			onSwitchChecked(friend) {
				if (!friend.disabled) {
					friend.checked = !friend.checked;
					// this.selectedFriendId=friend.id
				}
			},
			onShowUserInfo(userId) {
				uni.navigateTo({
					url: "/pageSubOne/common/user-info?id=" + userId
				})
			},
			loadGroupInfo(id) {
				this.$http({
					url: `/group/findGroupById/${id}`,
					method: 'GET'
				}).then((group) => {
					console.log(group)
					this.group = group;
				});
			},
			loadGroupMembers(id) {
				this.$http({
					url: `/group/members/${id}`,
					method: "GET"
				}).then((members) => {
					this.groupMembers = members.filter(m => !m.quit);
					this.initGroupMembers();
				})
			},
			initGroupMembers() {
				this.friendItems = [];
				let friends = this.groupMembers
				friends.forEach((f => {
					let item = {
						id: f.userId,
						headImage: f.headImage,
						nickName: f.showNickName,
						online: f.online
					}
					item.disabled = this.isGroupMember(f.userId);
					item.checked = item.disabled || this.isGroupAdmin(f.userId)
					this.friendItems.push(item);
				}))
				console.log(this.friendItems)
			},
			isGroupMember(id) {
				// return this.groupMembers.some(m => m.userId == id);
				return this.userStore.userInfo.id == id
			},
			isGroupAdmin(id) { //判断群成员是否有管理员
				return this.groupAdmin.includes(id);
			},
			isSelf(userId) {
				return this.userStore.userInfo.id == userId
			},
			firstLetter(strText) {
				// 使用pinyin-pro库将中文转换为拼音
				let pinyinOptions = {
					toneType: 'none', // 无声调
					type: 'normal' // 普通拼音
				};
				let pyText = pinyin(strText, pinyinOptions);
				return pyText[0];
			},
			isEnglish(character) {
				return /^[A-Za-z]+$/.test(character);
			}
		},
		computed: {
			countAdmin() {
				let checkItems = this.friendItems.filter(friend => friend.checked && !friend.disabled)
				return checkItems.length
			},
			inviteSize() {
				return this.groupMembers.filter(f => !f.disabled && f.checked).length;
			},
			isOwner() {
				return this.userStore.userInfo.id == this.group.ownerId;
			},
			friendGroupMap() {
				// 按首字母分组
				let groupMap = new Map();
				this.friendItems.forEach((f) => {
					if (this.searchText && !f.nickName.includes(this.searchText)) {
						return;
					}
					let letter = this.firstLetter(f.nickName).toUpperCase();
					// 非英文一律为#组
					if (!this.isEnglish(letter)) {
						letter = "#"
					}
					if (f.online) {
						letter = '*'
					}
					if (groupMap.has(letter)) {
						groupMap.get(letter).push(f);
					} else {
						groupMap.set(letter, [f]);
					}
				})
				// 排序
				let arrayObj = Array.from(groupMap);
				arrayObj.sort((a, b) => {
					// #组在最后面
					if (a[0] == '#' || b[0] == '#') {
						return b[0].localeCompare(a[0])
					}
					return a[0].localeCompare(b[0])
				})
				groupMap = new Map(arrayObj.map(i => [i[0], i[1]]));
				return groupMap;
			},
			friendIdx() {
				return Array.from(this.friendGroupMap.keys());
			},
			friendGroups() {
				return Array.from(this.friendGroupMap.values());
			}
		},
		onLoad(options) {
			this.groupId = options.id
			this.groupAdmin = options.groupAdmin
			this.loadGroupInfo(options.id);
			this.loadGroupMembers(options.id);
		},
		onUnload() {
			if (this.isModify) {
				// 刷新页面
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.loadGroupMembers();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.group-admin {
		position: relative;
		border: #dddddd solid 1px;
		display: flex;
		flex-direction: column;

		.search {
			padding-bottom: 20rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 100%;
			// margin: 0 auto;
			padding: 10rpx 32rpx;

			:deep(.u-search__content) {
				border-radius: 30px !important;
				height: 72rpx;
			}

			:deep(.u-search) {
				border-radius: 30px !important;
				// border: 1rpx solid $gray-200;
			}
		}

		.admin {
			display: flex;
			justify-content: center;
			flex-direction: column;
			gap: 16rpx;
			padding: 24rpx 32rpx;

			.title {
				color: $gray-400;
			}

			.box {
				display: flex;
				flex-wrap: wrap;

				.admin-item {
					width: 112rpx;
					height: 148rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					text {
						width: 90%;
						display: inline-block;
						text-overflow: ellipsis;
						overflow: hidden;
						text-align: center;
						color: $gray-600;
					}
				}
			}
		}

		.confirm-text {
			font-size: 30rpx;
			color: #1989FA;
		}

		.member-items {
			position: relative;
			flex: 1;
			// overflow: hidden;
			padding-bottom: 174rpx;

			.member-item {
				height: 120rpx;
				display: flex;
				margin-bottom: 1rpx;
				position: relative;
				padding: 0 30rpx;
				align-items: center;
				background-color: white;
				white-space: nowrap;

				.friend-checked {
					margin-right: 20rpx;
				}

				.member-name {
					flex: 1;
					padding-left: 20rpx;
					font-size: 30rpx;
					font-weight: 600;
					line-height: 60rpx;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.scroll-bar {
				height: 100%;
			}
		}

		.tabbar {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding-bottom: 42rpx;
			border-top: 1rpx solid $gray-200;
			background-color: $white;
			z-index: 100;

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 32rpx;

				.left {
					color: $gray-900;
				}

				.right {
					.btncolor {
						background-color: $brand-500;
						color: $white;
						padding: 16rpx 32rpx;
						border-radius: 40rpx;
						text-align: center;
						line-height: 46rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}
</style>